<script setup lang="ts">
import {onMounted, ref, watch} from 'vue'
import {PlayMode, useAudioPlayerStore} from "@/stores"

const props = defineProps({
  themeDarkStyle: {
    required: false,
    default: false,
    type: Boolean
  }
})

const audioPlayer = useAudioPlayerStore()

const showDialog = ref(false)

const dialogRef = ref(null)

const modeClass = ref("order")

onMounted(()=>{
  changeClass()
})

const changeClass = () =>{
  let setClass = 'img_mode '
  if(props.themeDarkStyle)
  {
    switch (audioPlayer.playMode)
    {
      case PlayMode.Single:
        setClass += 'single_dark '
        break;
      case PlayMode.Normal:
        setClass += 'list_dark '
        break;
      case PlayMode.Shuffle:
        setClass += 'random_dark '
        break;
      case PlayMode.Order:
        setClass += 'order_dark '
        break;
      default:
        setClass += 'list_dark '
        break;
    }

  }
  else
  {
    switch (audioPlayer.playMode)
    {
      case PlayMode.Single:
        setClass += 'single '
        break;
      case PlayMode.Normal:
        setClass += 'list '
        break;
      case PlayMode.Shuffle:
        setClass += 'random '
        break;
      case PlayMode.Order:
        setClass += 'order '
        break;
      default:
        setClass += 'list '
        break;
    }
  }
  modeClass.value = setClass
}


function handleClickOutSide(e:any)
{
  if(dialogRef.value!==null)
  {
    if(!dialogRef.value.contains(e.target)){
      showDialog.value = false
      document.removeEventListener('click',handleClickOutSide)
    }
  }
}

watch(showDialog,(newValue) => {
  if (newValue)
  {
    setTimeout(() => {
      // 添加点击事件的监听器
      document.addEventListener('click', handleClickOutSide);
    }, 20);
  }
  else {
    document.removeEventListener('click',handleClickOutSide)
  }
})

const HandleSetPlayMode = (mode: string) => {
  switch (mode){
    case "order":
      audioPlayer.setPlayMode(PlayMode.Order)
      break;
    case "single":
      audioPlayer.setPlayMode(PlayMode.Single)
      break;
    case "list":
      audioPlayer.setPlayMode(PlayMode.Normal)
      break;
    case "random":
      audioPlayer.setPlayMode(PlayMode.Shuffle)
      break;
    default:
      audioPlayer.setPlayMode(PlayMode.Normal)
      break;
  }
  showDialog.value = false
  changeClass()
}

const handleDialogDisplay = () => {
  showDialog.value = !showDialog.value
}

</script>

<template>
  <div class="btn-mode">
    <div :class="modeClass" @click="handleDialogDisplay"></div>
    <div ref="dialogRef" class="mode-dialog" v-show="showDialog">
      <ul>
        <li @click="HandleSetPlayMode('random')"><i class="random"></i>随机播放</li>
        <li @click="HandleSetPlayMode('list')"><i class="list"></i>顺序播放</li>
        <li @click="HandleSetPlayMode('single')"><i class="single"></i>单曲播放</li>
        <li @click="HandleSetPlayMode('order')"><i class="order"></i>列表循环</li>
      </ul>
    </div>

  </div>



</template>

<style lang="scss" scoped>
.single{
  background: url(@/assets/qqimgs/mode-single.svg) no-repeat center center;
  height: 18px;
  width: 18px;
}

.order{
  background: url(@/assets/qqimgs/mode-cycle.svg) no-repeat center center;
  height: 18px;
  width: 18px;
}

.random{
  background: url(@/assets/qqimgs/mode-random.svg) no-repeat 0 2px;
  height: 18px;
  width: 18px;
}

.list{
  background: url(@/assets/qqimgs/mode-list.svg) no-repeat center center;
  height: 18px;
  width: 18px;
}


.single_dark{
  background: url(@/assets/qqimgs/mode-single--white.svg) no-repeat center center;
  height: 18px;
  width: 18px;
}

.order_dark{
  background: url(@/assets/qqimgs/mode-cycle--white.svg) no-repeat center center;
  height: 18px;
  width: 18px;
}

.random_dark{
  background: url(@/assets/qqimgs/mode-random--white.svg) no-repeat 0 2px;
  height: 18px;
  width: 18px;
}

.list_dark{
  background: url(@/assets/qqimgs/mode-list--white.svg) no-repeat center center;
  height: 18px;
  width: 18px;
}

.btn-mode{
  position: relative;
  .img_mode{
    height: 18px;
    width: 18px;

    &:hover{
      cursor: pointer;
    }
    &:active{
      transform: translate(1px,1px) ;
    }
  }

  .mode-dialog{
    position: absolute;
    top: -188px;
    left: -60px;
    width: 138px;
    height: 194px;
    background: url(@/assets/qqimgs/mode-dialog.svg);
    padding: 10px 10px 10px 10px;
    z-index: 1000;

    ul{
      padding: 0;
      margin: 0;
      position: relative;
      display: flex;
      flex-direction: column;

      li{
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: #ededed 1px solid;
        padding: 4px 2px;
        border-radius: 8px;

        &:hover{
          background-color: #f3f3f3;
        }

        i{
          margin-right: 8px;
        }

        &:last-child{
          border-bottom: none;
        }
      }

    }

  }


}



</style>